<template>
	<view class="index-page">
		<!-- 侧边栏组件 -->
		<sideBar :menuList="menuList" @menu-item-click="handleMenuItemClick" />
		<!-- 主内容区域 -->
		<view class="main-content">
			<view >用戶管理</view>
			<view style="margin: 20rpx;">
				<button class="uni-button" size="mini" type="primary" @click="add">新增</button>
			</view>
			<view style="margin: 20rpx;">
					  <view style="margin: 0 auto;">
						  <view style="float: left;margin: 0 20px;">
							  <text style=" float: left;">用户名:</text><input type="text" style=" float: left; border: 1px solid #eee;" placeholder="输入用户名"/>
						  </view>
						  <button class="uni-button" size="mini" type="primary" @click="add">搜索</button>
					  </view>
					
			</view>
			<uni-table border stripe emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="left">用户名</uni-th>
					<uni-th align="left">账号</uni-th>
					<uni-th align="left">邮箱</uni-th>
					<uni-th align="center">操作</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="item in contentList">
					<uni-td>{{item.username}}</uni-td>
					<uni-td>{{item.account}}</uni-td>
					<uni-td>{{item.email}}</uni-td>
					<uni-td align="center">
						<button class="uni-button" size="mini" type="primary" @click="updateItem(item.id)">修改</button>
						<button class="uni-button" size="mini" type="warn" @click="deleteItem(item.id)"
							style="margin: 0 10rpx;">删除</button>
					</uni-td>
				</uni-tr>
			</uni-table>
			<view>
				<uni-pagination :total="contentTotal" @change="changePage"></uni-pagination>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue';
	import sideBar from '../../components/side-bar.vue'
	import {
		baseUrl,
		menuList,
		handleMenuItemClick,
		checkLogin
	} from '../../static/js/common.js'

	const contentList = ref([])
	let contentTotal = ref(0)

	let pageIndex = 1;
	let pageSize = 10;

	function deleteItem(id) {
		let authorization = checkLogin()
		uni.showModal({
			title: '提示',
			content: '确定删除这个用戶吗',
			success: function(res) {
				if (res.confirm) {
					uni.request({
						url: baseUrl + '/user/delete?id=' + id,
						header: {
							'Authorization': authorization
						},
						success: (res) => {
							if (res.data.code == 200) {
								uni.showToast({
									icon: 'success',
									title: '删除成功'
								})
								fillTable()
							}
						}
					})
				} else if (res.cancel) {

				}
			}
		});

	}

	function updateItem(id) {
		uni.navigateTo({
			url: '/pages/userIndex/userAdd?userId=' + id
		})
	}

	function add() {
		uni.navigateTo({
			url: '/pages/userIndex/userAdd'
		})
	}

	function changePage(e) {
		pageIndex = e.current
		fillTable()
	}

	onShow(() => {
		fillTable()
	})

	function fillTable() {
		let authorization = checkLogin()
		let params = {
			pageIndex,
			pageSize
		}
		uni.request({
			url: baseUrl + "/user/manager/list",
			data: params,
			method: 'POST',
			header: {
				'Authorization': authorization
			},
			success: (res) => {
				contentList.value = res.data.data.result
				contentTotal.value = res.data.data.itemCount
			}
		})
	}
</script>

<style scoped>
	.index-page {
		display: flex;
	}

	.main-content {
		flex: 1;
		padding: 20px;
	}
</style>